<template>
  <div class="row">
    <div class="col-md-6 col-12">
      <chart-card :key="key1" title="CPU占用趋势" sub-title="CPU使用情况良好" :chart-data.sync="activityChart1.data"
        :chart-options="activityChart1.options">
        <div slot="legend">
          <i class="fa fa-circle text-info">已用CPU占比%</i>&emsp;
          <i class="fa fa-circle text-warning">剩余CPU占比%</i>
        </div>
      </chart-card>
    </div>
    <div class="col-md-6 col-12">
      <chart-card :key="key2" title="内存占用趋势" sub-title="内存使用情况良好" :chart-data.sync="activityChart2.data"
        :chart-options="activityChart2.options">
        <div slot="legend">
          <i class="fa fa-circle text-info">已用内存占比%</i>&emsp;
          <i class="fa fa-circle text-warning">剩余内存占比%</i>
        </div>
      </chart-card>
    </div>
    <div class="col-12">
      <card :title="table1.title" :subTitle="table1.subTitle">
        <div slot="raw-content" class="table-responsive">
          <paper-table :data.sync="table1.data" :columns="table1.columns">
          </paper-table>
        </div>
      </card>
    </div>

    <div class="col-12">
      <card :title="table2.title" :subTitle="table2.subTitle">
        <div slot="raw-content" class="table-responsive">
          <paper-table :data.sync="table2.data" :columns="table2.columns">
          </paper-table>
        </div>
      </card>
    </div>


    <card :title="table3.title" :subTitle="table3.subTitle" style="display: inline-table;margin-left: 1.03%;"
      class="col-6">
      <div slot="raw-content" class="table-responsive">
        <paper-table :data="table3.data" :columns="table3.columns">
        </paper-table>
      </div>
    </card>
    <span style="width: 1.2%;"></span>
    <card :title="table4.title" :subTitle="table4.subTitle" style="display: inline-table" class="col-5">
      <div slot="raw-content" class="table-responsive">
        <paper-table :data="table4.data" :columns="table4.columns">
        </paper-table>
      </div>
    </card>

    <div class="col-12">
      <card :title="table6.title" :subTitle="table6.subTitle">
        <div slot="raw-content" class="table-responsive">
          <paper-table :data="table6.data" :columns="table6.columns">
          </paper-table>
        </div>
      </card>
    </div>
    <div class="col-7">
      <card :title="table7.title" :subTitle="table7.subTitle">
        <div slot="raw-content" class="table-responsive">
          <paper-table :data="table7.data" :columns="table7.columns">
          </paper-table>
        </div>
      </card>
    </div>
  </div>
</template>
<script>
import { PaperTable } from "@/components";
import Axios from "axios";
import globalVars from '../plugins/globalVars';
import { ChartCard } from "@/components/index";
const tableColumns = ["LOGIC_CORE_INDEX", "CPU型号", "逻辑核心频率", "CPU占用率", "CPU架构"];



var tableData2 = [
  {
    JDK_VERSION: "-",
    JDK_NAME: "-",
    MAX_JVM_MEMORY: "-",
    已用JVM内存空间: "-",
    剩余JVM内存空间: "-",
    剩余JVM内存占比: "-",
    Set(f, e, a, b, c, d) {
      this.MAX_JVM_MEMORY = a
      this.已用JVM内存空间 = b
      this.剩余JVM内存空间 = c
      this.剩余JVM内存占比 = d
      this.JDK_NAME = e
      this.JDK_VERSION = f
    }

  },

];
var tableData3 = [{
  OS_ARCH: "-",
  操作系统: "-",
  机器名称: "-",
  制造商: "-",
  Set(d, a, b, e) {
    this.OS_ARCH = b
    this.操作系统 = d
    this.机器名称 = a
    this.制造商 = e
  }
}];
var tableData4 = [{
  请求总数: "-",

  当前线程数: "-",
  Set(a, b,) {
    this.请求总数 = a

    this.当前线程数 = b

  }
}];
var tableData6 = [];
var tableData7 = [];
const tableColumns2 = ["JDK_VERSION", "JDK_NAME", "MAX_JVM_MEMORY", "已用JVM内存空间", "剩余JVM内存空间", "剩余JVM内存占比"];
const tableColumns3 = ["OS_ARCH", "操作系统", "机器名称", "制造商"]
const tableColumns4 = ["请求总数", "当前线程数"]
const tableColumns6 = ["GRAPHICS_CARD_INDEX", "GPU型号", "GPU供应商", "最大显存"];
const tableColumns7 = ["线程名", "CPU线程占用", "PID"];

export default {
  components: {
    PaperTable,
    ChartCard,
  },
  data() {
    return {
      key1: false,
      key2: false,
      LOGIC_CORE_INDEX: "",
      tableData: [
      ],
      table1: {
        title: "CPU数据一览",
        subTitle: "监控模型的总计算资源",
        columns: [...tableColumns],
        data: [],
      },
      table2: {
        title: "JVM数据一览",
        subTitle: "监控专属模型的内存资源",
        columns: [...tableColumns2],
        data: [...tableData2],

      },
      table3: {
        title: "配置数据",
        subTitle: "了解基本配置",
        columns: [...tableColumns3],
        data: [...tableData3]
      },
      table4: {
        title: "访问流量一览",
        subTitle: "监控模型访问流量",
        columns: [...tableColumns4],
        data: [...tableData4]
      },

      table6: {
        title: "GPU数据一览",
        subTitle: "监控模型的GPU计算资源",
        columns: [...tableColumns6],
        data: []
      },
      table7: {
        title: "线程占用一览",
        subTitle: "监控机器的线程占用情况",
        columns: [...tableColumns7],
        data: []
      },
      polling: null,
      activityChart1: {
        data: {
          labels: [
            "50s ago",
            "40s ago",
            "30s ago",
            "20s ago",
            "10s ago",
            "now",
          ],
          series: [
            [0, 0, 0, 0, 0, 0],
          ],

        },
        options: {
          seriesBarDistance: 10,
          axisX: {
            showGrid: true,
          },
          height: "260px",
          high: 100,
          low: 0
        },

      },
      activityChart2: {
        data: {
          labels: [
            "50s ago",
            "40s ago",
            "30s ago",
            "20s ago",
            "10s ago",
            "now",
          ],
          series: [
            [0, 0, 0, 0, 0, 0],
          ],

        },
        options: {
          seriesBarDistance: 10,
          axisX: {
            showGrid: true,

          },
          height: "260px",
          high: 100,
          low: 0
        },
      },
    };
  },

  methods: {

    postData(url, data) {
      return new Promise(() => {
        // var TotInfo = Axios.get('/watch');
        var CPUIdx = Axios.post(url + "/watch")

        var ReqNum = Axios.get(url + "/actuator/metrics/http.server.requests")
        var ActThd = Axios.get(url + "/actuator/metrics/jvm.threads.live")
        Axios.all([CPUIdx, ReqNum, ActThd])
          .then(Axios.spread((CPUI, ReqN, ActT) => {
            this.tableData = []
            tableData6 = []
            tableData7=[]
            tableData2[0].Set(
              CPUI.data.jvmInfo.jdkVersion, CPUI.data.jvmInfo.jdkName, CPUI.data.jvmInfo.maxMemory,
              CPUI.data.jvmInfo.usedMemory, CPUI.data.jvmInfo.freeMemory, (CPUI.data.jvmInfo.usePercent * 100).toString() + "%"
            );
            tableData3[0].Set(
              CPUI.data.sysInfo.osArch,
              CPUI.data.sysInfo.osName,
              CPUI.data.sysInfo.name,
              CPUI.data.computerSystem.manufacturer
            )
            this.upd1(CPUI.data.cpuInfo.usePercent * 100)
            this.upd(CPUI.data.memoryInfo.usePercent * 100)
//监听内存溢出逻辑
            if(CPUI.data.memoryInfo.usePercent * 100>65){
              
              console.log("aaa")
              Axios.get("http://localhost:3000"+`/send?type=memoryflow&value=${CPUI.data.memoryInfo.usePercent.toString()}`)
            }



            this.key1 = !this.key1
            this.key2 = !this.key2
            this.add(CPUI.data.centralProcessor.logicalProcessorCount,
              CPUI.data.centralProcessor.processorIdentifier.name,
              CPUI.data.centralProcessor.currentFreq,
              CPUI.data.cpuInfo.usePercent,
              CPUI.data.centralProcessor.processorIdentifier.microarchitecture
            )

            tableData4[0].Set(ReqN.data.measurements[0].value.toFixed(0), ActT.data.measurements[0].value.toFixed(0))
            this.add6(CPUI.data.hardwareAbstractionLayer.graphicsCards.length,
              CPUI.data.hardwareAbstractionLayer.graphicsCards[0].name,
              CPUI.data.hardwareAbstractionLayer.graphicsCards[0].vendor,
              (CPUI.data.hardwareAbstractionLayer.graphicsCards[0].vram / 1024 / 1024 / 1024).toFixed(2)
            )
            this.add7(CPUI.data.processList.length, CPUI.data.processList)
          }
          )
          )
          .catch(err => {
            Axios.get("http://localhost:3000"+`/send?type=error&special=${err}`)
            
          })
      })
    },
    pollData() {
      this.polling = setInterval(() => {
        this.postData(globalVars.Url, {})

      },10000)

    },
    upd1(a) {
      this.activityChart1.data.series[0].push(a)
      this.activityChart1.data.series[0].shift()
    },
    upd(a) {
      this.activityChart2.data.series[0].push(a)
      this.activityChart2.data.series[0].shift()
    },
    add(idx, mod, hz, use, arch) {
      var obj
      while (idx >= 1) {
        idx--
        obj = {
          LOGIC_CORE_INDEX: idx,
          CPU型号: mod,
          逻辑核心频率: hz[idx],
          CPU占用率: use,
          CPU架构: arch,
        }
        this.tableData.push(obj)
      }
      this.table1.data = this.tableData
    },
    //["GRAPHICS_CARD_INDEX", "GPU型号", "GPU供应商", "最大显存"];

    add6(idx, Gmod, GMau, GMem) {
      while (idx >= 1) {
        idx--
        tableData6.push({
          GRAPHICS_CARD_INDEX: idx,
          GPU型号: Gmod,
          GPU供应商: GMau,
          最大显存: GMem.toString() + "GB"
        })
      }
      this.table6.data = tableData6
    },
    add7(idx, ThreadMsg) {
      while (idx >= 1) {
        idx--
        tableData7.push({
          线程名: ThreadMsg[idx].name,
          CPU线程占用: ThreadMsg[idx].cpu,
          PID: ThreadMsg[idx].pid,
        })
      }
      this.table7.data = tableData7
    },
  },
  mounted() {
    if (sessionStorage.getItem("logStatu") == "OK") {
      this.pollData()
    }
  },
  beforeDestroy() {
    clearInterval(this.polling);
  }

}
</script>
<style></style>
